<template>
  <div class="box">
    <div class="box_show">
      <div class="box_child">
        <div class="header-handle">
          <el-button type="primary" @click="type=true">修改密码</el-button>
          <!-- 个人信息 -->
          <el-button type="text" @click="dialogFormVisible = true">编辑</el-button>

          <el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible">
            <el-form :model="form" class="from_box">
              <div>
                <p>姓名</p>
                <el-input v-model="form.realname" placeholder="请输入内容" style="width:210px;" size="mini"></el-input>
                <p>性别</p>
                <el-select v-model="form.value" placeholder="请选择" size="mini">
                  <el-option v-for="item in form.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
              <div>
                <p>邮箱</p>
                <el-input v-model="form.email" placeholder="请输入内容" style="width:210px;" size="mini"></el-input>
                <p>手机号(登录名)</p>
                <el-input v-model="form.username" disabled :placeholder="userlist.username" style="width:210px;" size="mini"></el-input>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="upsate">确 定</el-button>
            </div>
          </el-dialog>
          <!-- 个人信息over -->
          <el-button type="primary" style="background:#fff;color:#000;border:1px solid #FFF;" @click="btns_up">返回</el-button>
        </div>
        <!-- 修改头像 -->
        <div class="user">
          <div>
            <div class="top_left" @click="$refs.file.click()">
              <img v-if="userlist.img" :src="userlist.img" alt />
              <i v-else class="covers">{{userlist.id-1}}</i>
              <input type="file" hidden ref="file" id="file" @change="onFileChange" />
              <el-dialog title="修改头像" append-to-body :visible.sync="dialogVisible" @opened="onDiaoopend" @closed="onclosed">
                <div class="headerphoto">
                  <img class="headerphoto_img" :src="prevuewImage" ref="headerphoto_img" />
                </div>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="onuphoto">确 定</el-button>
                </span>
              </el-dialog>
            </div>
            <!-- 修改头像over -->
            <div class="top_right">
              <div class="top_text" style="font-size: 25px;
    margin-bottom: 15px;">{{userlist.realname}}</div>
              <div class="top_sl">
                <span>部门：{{userlist.structure_name}}</span>
                <span>职位：{{userlist.post}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer>
        <div class="footer_child">
          <div class="section-header">
            <div class="section-mark"></div>
            <div class="section-title">基本信息</div>
          </div>
          <div class="footer_box">
            <div>
              <ul>
                <li>
                  姓名
                  <b>{{userlist.realname}}</b>
                </li>
                <li>
                  手机号(登录号）
                  <b>{{userlist.username}}</b>
                </li>
                <li>
                  部门办公室
                  <b>{{userlist.structure_name}}</b>
                </li>
                <li>
                  直属上级
                  <b>{{userlist.parent_name}}</b>
                </li>
              </ul>
            </div>
            <div>
              <ul>
                <li>
                  性别
                  <b>{{userlist.sex}}</b>
                </li>
                <li>
                  邮箱
                  <b>{{userlist.email}}</b>
                </li>
                <li>
                  岗位
                  <b>{{userlist.post}}</b>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <setpass :type="type" :btn="btn"></setpass>
  </div>
</template>

<script>
import http from "@/util/http.js";
import setpass from "../info/info";
import { upimg } from "@/api/user";
// 图片裁剪工具的引入先把图片设置好display：block 等
// 引入css先
import "cropperjs/dist/cropper.css";
import Cropper from "cropperjs";
//const image = this.$refs["headerphoto_img"];
// 获取图片的dom节点
// 1.先拿到这个图片
// 初始化裁切器
// const cropper = new Cropper(image, {

//   aspectRatio: 16 / 9,
//   crop(event) {
//     console.log(event.detail.x);
//     console.log(event.detail.y);
//     console.log(event.detail.width);
//     console.log(event.detail.height);
//     console.log(event.detail.rotate);
//     console.log(event.detail.scaleX);
//     console.log(event.detail.scaleY);
//   },
// });
export default {
  name: "",
  data() {
    return {
      form: {
        realname: "",
        email: "",
        type: [],
        username: "",
        value: "",
        id: "",
        options: [
          {
            value: "选项1",
            label: "男",
          },
          {
            value: "选项2",
            label: "女",
          },
        ],
      },

      userlist: [], //获取的页面个人信息数据
      type: false, //修改密码的状态
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisible: false, ///控制上传图片裁切预览状态
      prevuewImage: "", //预览图片
      cropper: null, //裁切器实例
    };
  },
  methods: {
    btns_up() {
      //返回至工作台
      this.$router.push("office/gzt");
    },
    btn() {
      //关闭对话框状态
      this.type = false;
    },
    upsate() {
      console.log("yes");
      if (this.form.realname === "") {
        this.$message.error("请输入名字");
      } else if (this.form.email === "") {
        this.$message.error("请输入邮箱");
      } else {
        http.post("admin/users/update", this.form).then((res) => {
          console.log(res.data.code);
          if (res.data.code === 200) {
            this.$message({
              message: "恭喜您，用户信息修改成功",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.$router.push("/office/gzt");
          }
        });
      }
    },
    // 修改头像
    onFileChange() {
      //得到预览的图片
      this.file = this.$refs.file;
      const blobData = window.URL.createObjectURL(file.files[0]);
      this.prevuewImage = blobData;
      console.log(blobData);

      // 展示弹出层，预览用户图片
      this.dialogVisible = true;

      // 解决选择相同文件不触发change事件
      this.$refs.file.value = "";
    },

    // 弹出框动画全部结束后的回调用于展示裁切器
    onDiaoopend() {
      // 图片裁切器必须基于img---img必须是可视化状态
      const image = this.$refs["headerphoto_img"];
      // 获取图片的dom节点
      // 1.先拿到这个图片
      // 初始化裁切器，默认不会更新，如果预览裁切的图片不会发生变化
      // 方式一：裁切器.replace方法
      // 方式二：毁掉裁切器，重新初始化
      this.cropper = new Cropper(image, {
        viewMode: 1,
        dragMode: "none",
        aspectRatio: 1,
        cropBoxResizable: false,
        background: false,
        movable: true,
      });
    },
    //动画关闭销毁裁切器
    onclosed() {
      this.cropper.destroy();
    },
    onuphoto() {
      // 获取裁切对象
      this.cropper.getCroppedCanvas().toBlob((file) => {
        const fd = new FormData();
        fd.append("file", file);
        console.log(this.userlist.d);
        upimg(fd, this.form.id).then((res) => {
          console.log(res);
        });
      });
      // 请求更新
      // 关闭对话框
      // 更新视图显示
    },
  },
  mounted() {
    http.post("admin/users/read").then((res) => {
      this.userlist = res.data.data;
    });
  },

  components: { setpass },
};
</script>

<style scoped lang='scss'>
.headerphoto {
  .headerphoto_img {
    display: block;
    max-width: 100%;
    height: 300px;
  }
}
.from_box {
  display: flex;
  padding: 0 50px;
  width: 500px;
  div {
    flex: 1;
  }
}
.top_sl {
  span {
    padding: 0 20px;
    font-size: 12px;
    color: #777;
  }
}
.footer_box {
  width: 100%;
  height: 150px;

  display: flex;
  div {
    flex: 1;

    ul li {
      line-height: 30px;
      font-size: 12px;
      text-indent: 30px;
      color: #777;
      b {
        display: inline-block;
        padding: 0 50px;
        font-weight: normal;
      }
    }
  }
}
.top_left {
  float: left;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border: 1px solid #3e84e9;
  border-radius: 50%;
  position: relative;
  .covers {
    color: #fff;
    display: inline-block;
    font-size: 30px;
    width: 125px;
    height: 100%;
    text-align: center;
    line-height: 120px;
    background-color: #3e84e9;
    overflow: hidden;
  }
  img {
    width: 100%;
    height: 100%;
  }
  div {
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 30px;
    position: absolute;
    top: 35%;
    left: 28%;
  }
}
.top_right {
  float: left;
  width: 300px;
  height: 100px;
  margin-left: 30px;
  margin-top: 30px;
}
.box {
  padding: 40px 280px;
  background: #efefef;
  height: 600px;
  .box_show {
    background: #fff;
    border: 1px solid #f1f1f1;
    .box_child {
      height: 200px;

      position: relative;
      margin-bottom: 5px;
      .user {
        position: absolute;

        width: 738px;
        top: 38px;
        left: 80px;
        padding: 15px 0;
      }

      .header-handle {
        height: 35px;
        float: right;
        padding: 10px 30px;
        .el-button {
          display: inline-block;
          line-height: 1;
          white-space: nowrap;
          cursor: pointer;
          background: #fff;
          border: 1px solid #ddd;
          color: #333;
          -webkit-appearance: none;
          text-align: center;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          outline: none;
          margin: 0 5px;
          -webkit-transition: 0.1s;
          transition: 0.1s;
          font-weight: 500;
          -moz-user-select: none;
          -webkit-user-select: none;
          -ms-user-select: none;
          padding: 8px 12px;
          font-size: 13px;
          border-radius: 2px;
          color: #fff;
          background-color: #3e84e9;
          border-color: #3e84e9;
        }
      }
    }
    footer {
      height: 400px;

      .footer_child {
        height: 162px;
        padding: 30px 80px;
        position: relative;
        border-top: 10px solid #f5f6f9;

        margin-top: 8px;
        .section-header {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          padding: 5px 15px;
          .section-mark {
            border-left: 2px solid #46cdcf;
            height: 10px;
          }
          .section-title {
            font-size: 13px;
            color: #333;
            margin-left: 8px;
            -ms-flex-negative: 0;
            flex-shrink: 0;
          }
        }
      }
    }
  }
}
</style>
